<template>
  <div class="control-duty">
    <div class="title"></div>
    <div class="main">
      <LeftPart />
      <RightPart />
    </div>

    <div class="duty-summary">
      <div>监管单位 1601 家，其中存在消控室单位 1601 家 </div>
      <n-date-picker v-model:formatted-value="timestamp" value-format="yyyy-MM-dd" type="date" class="!w-[182px] ml-[8px]" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import LeftPart from './leftPart/index.vue';
import RightPart from './rightPart/index.vue';

const timestamp = ref('2024-07-02')

defineComponent({ name: 'ControlDuty' });
</script>

<style scoped lang="scss">
.control-duty {
  @apply relative w-full h-[614px];

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full mt-[10px] grid grid-cols-2 gap-[46px];
  }

  .duty-summary {
    @apply absolute top-[6px] right-0 flex items-center text-[16px] text-[#DAAD17];
    font-family: Alibaba PuHuiTi;
  }
}
</style>
